<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>菜单列表</title>
	<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
	<link rel="stylesheet" type="text/css" href="/static/plugins/zTree/zTreeStyle/zTreeStyle.css"/>	
	<link rel="stylesheet" type="text/css" href="/static/iconfont/iconfont.css"/>	
	<link rel="stylesheet" type="text/css" href="/static/common/common.css" />
	<style type="text/css">	
		.input-inline-width{
			width: 250px!important;
		}
		.layui-form.layui-border-box.layui-table-view {
		    margin-left: 221px;
		}
	</style>
</head>
<body class="body-container">
	<div>
		<div class="node_name_list">
			<a style="font-size: 15px;"></a>
		</div>		
		<button type="button" class="layui-btn layui-btn-normal layui-btn-sm add-menu-btn">添加菜单</button>
	</div>
	
	<!-- table表格数据 -->
	<div class="content-container">
		<div class="ztree-container">	
			<label class="ztree-title" for="">菜单树形列表</label>
			<ul id="permissionZtree" class="ztree"></ul>
		</div>
	
	
		<table class="layui-hide" id="layerTable" lay-filter="layerTable"></table>
	</div>
	
	<script type="text/html" id="layuiTableToolbar">
  		<div class="layui-btn-container">
    				
  		</div>
	</script>
	
	<script src="/static/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script src="/static/layui/layui.all.js" type="text/javascript"></script>
	<script src="/static/plugins/zTree/js/jquery.ztree.all.min.js" type="text/javascript"></script>
	<script src="/static/common/common.js" type="text/javascript"></script>
	<script type="text/javascript" th:inline="none">
		$(document).ready(function() {
		
			selectZtreeList();
		})
		
		// table
		var table_url = '/sysMenu/selectPageInfoList';	
		layui.use('table', function(){
	        var table = layui.table;
	        table.render({
	            elem: '#layerTable'	
	            //,url:'/sysMenu/selectPageInfoList'
	          	//,toolbar: '#layuiTableToolbar'
				,height:600
				,method:'post'
				,limit:10
				,limits:[10,20,30]
				,where: {}
	            ,request: {
	                pageName: 'currentPage' //页码的参数名称，默认：page
	                ,limitName: 'pageSize' 	//每页数据量的参数名，默认：limit
	            }
	            ,response: {		
	                statusName: 'code' 		//数据状态的字段名称，默认：code
	                ,statusCode: 200 		//成功的状态码，默认：0
	                ,msgName: 'msg' 		//状态信息的字段名称，默认：msg
	                ,countName: 'total'  	//数据总数的字段名称，默认：count
	                ,dataName: 'dataObject' //数据列表的字段名称，默认：data
				}	
	            ,cols: [[		
	            	{field:'id',width:90, title: '编号'}
	            	,{field:'menuName',width:140, title: '菜单名称'}
	            	,{field:'menuType',width:100, title: '菜单类型',templet: 
	                	function(res){
	            			if(res.menuType=='menu'){
	            				return "<p style='#1e9fff'>菜单</p>";	
	            			}else if(res.menuType=='button'){
	            				return "<p style='#009688'>按钮</p>";	
	            			}else{            				
		                		return "";	
	            			}
	            		}
	                }	
	            	,{field:'menuStyle',width:100, title: '图标',templet:
	            		function(res){	
	                		return '<div><i class="'+res.menuStyle+'" style="font-size: 24px;"></i></div>';	
	            		}	
	            	},{field:'showOrder',width:100, title: '排序'}	            	
	            	,{field:'menuUrl',width:220, title: '菜单url'}
	                ,{field:'createTime',width:170, title: '创建时间', templet:'<div>{{ commonDateFormat(d.createTime,"yyyy-MM-dd hh:mm:ss")}}</div>'}
	                ,{field:'statusCode',width:100, title: '菜单状态',templet: 
	                	function(res){	
	               			return getStatusCodeMsg(res.statusCode);	
	                	}
	                }
	                ,{field:'remark',width:220, title: '备注'}
	                ,{field:'right',width:180,title: '操作', templet: 
	                	function(res){	
	                		var html = "";	
                			html += '<a class="layui-btn layui-btn-normal layui-btn-xs edit-menu-btn" menu-id="'+res.id+'" level='+res.level+'><i class="layui-icon layui-icon-edit"></i>编辑</a>';
                			return html;	
	                	}
	                }		
	            ]]	
	            ,page: true
	            ,done: function(res, curr, count){	
	            	
	            }
	        });  
    	});
		
		// 编辑
		$(document).on('click', '.edit-menu-btn', function() {
			var menuId = $(this).attr("menu-id");
			var levelVal = $(this).attr("level");
			var index = layer.open({				
				type: 1 ,				  		// 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层
				title: "编辑菜单",					// title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
				area: ['880px', '500px'],		// 默认：'auto' 	自适应
				//shade: 1,				  		// 要想显示遮罩需要将这个  注释							
				skin: 'layui-layer-lan',  		// layer内置的skin有：layui-layer-lan layui-layer-molv
				maxmin: true,
				resize:false,		
				shadeClose:false,					
				content:initEditMenuHtml(levelVal),					
				btn: ['立即添加','取消'], 	
				btn1: function(){			

				},
				btn2: function(){				
					layer.close(index);		
				},
				cancel: function(){ 

				},		
				success: function(layers){		
					var form = layui.form;
					layers.addClass('layui-form');	
					//	将按钮弄成能提交的
					layers.find('.layui-layer-btn0').attr('lay-filter', 'editMenuFrom').attr('lay-submit', '');
					
					// 查询编辑菜单信息
					selectMenuInfo(menuId);
					
					form.render(); 		
					form.on('submit(editMenuFrom)', function (data) {				
						data.field.menuId = menuId;	
						$.ajax({					
							url: '/sysMenu/editInfo', 				// 请求的url地址	
							dataType: 'json', 						// 返回格式为json	
							data: data.field,	
							type: 'post', 							// 请求方式		
							async: false,	
							success: function (res) {
								if (res.code == 200) {
									layer.msg("添加成功");	
									layer.close(index);	
									selectZtreeList();				
								}else{			
									layer.msg(res.msg);	
								}
							},		
							error: function () {

							}
						});
						return false;
					});	

				}	
			});
		})
		
		// 查询菜单信息
		function selectMenuInfo(id){
			$.ajax({			
				url: '/sysMenu/selectById', 				// 请求的url地址	
				dataType: 'json', 							// 返回格式为json	
				data: {'menuId':id},
				type: 'post', 								// 请求方式		
				success: function (res) {
					console.log(res);
					if(res.code==200){
						var menuInfo = res.dataObject;
						$(".edit-menu-from input[name='menuName']").val(menuInfo.menuName);
						$(".edit-menu-from input[name='showOrder']").val(menuInfo.showOrder);
						$(".edit-menu-from input[name='menuStyle']").val(menuInfo.menuStyle);
						$(".edit-menu-from input[name='menuUrl']").val(menuInfo.menuUrl);
						if(menuInfo.remark){							
							$(".edit-menu-from textarea[name='remark']").text(menuInfo.remark);
						}
					}else{
						layer.msg(res.msg);	
					}
				},		
				error: function () {

				}
			});
		}
		
		// 编辑菜单 html
		function initEditMenuHtml(level){
			var html = "";		
			html+='<div style="margin: 40px 20px;">';	
			html+='<form class="layui-form edit-menu-from" action="">';
			
			html+='<div class="layui-form-item">';
			html+='<div class="layui-inline">';
			html+='<label class="layui-form-label zdy-required">菜单名称</label>';
			html+='<div class="layui-input-inline input-inline-width">';
			html+='<input type="tel" name="menuName" lay-verify="required" maxlength="14" placeholder="请输入菜单名称" autocomplete="off" class="layui-input">';
			html+='</div>';
			html+='</div>';
			
			html+='<div class="layui-inline">';
			html+='<label class="layui-form-label zdy-required">显示顺序</label>';
			html+='<div class="layui-input-inline input-inline-width">';
			html+='<input type="text" name="showOrder" lay-verify="required" placeholder="请输入数字越小越靠前" maxlength="2"  autocomplete="off" class="layui-input">';
			html+='</div>';
			html+='</div>';
			html+='</div>';
			
			if(level==1){
				// 显示一级菜单	菜单样式  二级显示所有的一级菜单
				html+='<div class="layui-form-item">';
				html+='<div class="layui-inline one-menu-select-container">';
				html+='<label class="layui-form-label zdy-required">菜单样式</label>';
				html+='<div class="layui-input-inline input-inline-width">';	
				html+='<input type="tel" name="menuStyle" lay-verify="required" maxlength="45" placeholder="请输入菜单样式" autocomplete="off" class="layui-input">';
				html+='</div>';
				html+='</div>';	
				html+='</div>';		
			}
			
			html+='<div class="layui-form-item">';
			html+='<div class="layui-inline">';
			html+='<label class="layui-form-label">菜单URL</label>';
			html+='<div class="layui-input-inline input-inline-width">';	
			html+='<input type="text" name="menuUrl" placeholder="请输入菜单URL" maxlength="25"  autocomplete="off" class="layui-input">';
			html+='</div>';
			html+='</div>';
			
			html+='</div>';
			
			html+='<div class="layui-form-item layui-form-text">';	
			html+='<label name="description" class="layui-form-label">备注</label>';
			html+='<div class="layui-input-block">';						
			html+='<textarea name="remark" class="layui-textarea" placeholder=""></textarea>';		
			html+='</div>';	
			html+='</div>';		
			html+='</form>';
			html+='</div>';
			return html;
		}
		
		// 添加菜单
		$(document).on('click', '.add-menu-btn', function() {
			var index = layer.open({				
				type: 1 ,				  		// 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层
				title: "添加菜单",					// title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
				area: ['850px', '500px'],		// 默认：'auto' 	自适应
				//shade: 1,				  		// 要想显示遮罩需要将这个  注释							
				skin: 'layui-layer-lan',  		// layer内置的skin有：layui-layer-lan layui-layer-molv
				maxmin: true,
				resize:false,		
				shadeClose:false,					
				content:initAddMenuHtml(),					
				btn: ['立即添加','取消'], 	
				btn1: function(){			

				},
				btn2: function(){				
					layer.close(index);		
				},
				cancel: function(){ 

				},		
				success: function(layers){		
					var form = layui.form;
					layers.addClass('layui-form');	
					layers.find('.layui-layer-btn0').attr('lay-filter', 'addMenuFrom').attr('lay-submit', '');//将按钮弄成能提交的
					form.render(); 		
					form.on('submit(addMenuFrom)', function (data) {				
						console.log(data.field)	
						$.ajax({			
							url: '/sysMenu/addMenuInfo', 				// 请求的url地址	
							dataType: 'json', 							// 返回格式为json	
							data: data.field,
							type: 'post', 								// 请求方式		
							async: false,	
							success: function (res) {
								if (res.code == 200) {
									layer.msg("添加成功");	
									layer.close(index);	
									selectZtreeList();				
								}else{			
									layer.msg(res.msg);	
								}
							},		
							error: function () {

							}
						});
						return false;
					});	

				}	
			});
		})
		
		
		// 添加菜单 html
		function initAddMenuHtml(){
			var html = "";		
			html+='<div style="margin: 40px 20px;">';	
			html+='<form class="layui-form" action="">';
			
			html+='<div class="layui-form-item">';
			html+='<div class="layui-inline">';
			html+='<label class="layui-form-label zdy-required">菜单名称</label>';
			html+='<div class="layui-input-inline input-inline-width">';
			html+='<input type="tel" name="menuName" lay-verify="required" maxlength="14" placeholder="请输入菜单名称" autocomplete="off" class="layui-input">';
			html+='</div>';
			html+='</div>';

			html+='<div class="layui-inline">';
			html+='<label class="layui-form-label zdy-required">显示顺序</label>';
			html+='<div class="layui-input-inline input-inline-width">';
			html+='<input type="text" name="showOrder" lay-verify="required" placeholder="请输入数字越小越靠前" maxlength="2"  autocomplete="off" class="layui-input">';
			html+='</div>';
			html+='</div>';
			html+='</div>';
			
			html+='<div class="layui-form-item">';	
			html+='<div class="layui-inline">';
			html+='<label class="layui-form-label zdy-required">菜单级别</label>';	
			html+='<div class="layui-input-inline input-inline-width">';		
			html+='<input type="radio" name="level" value="1" lay-filter="menuLevel" title="一级菜单" checked="">';	
			html+='<input type="radio" name="level" value="2" lay-filter="menuLevel" title="二级菜单">';	
			html+='</div>';	
			html+='</div>';	
			
			
			// 显示一级菜单	菜单样式  二级显示所有的一级菜单
			html+='<div class="layui-inline one-menu-select-container">';
			html+='<label class="layui-form-label zdy-required">菜单样式</label>';
			html+='<div class="layui-input-inline input-inline-width">';
			html+='<input type="tel" name="menuStyle" lay-verify="required" maxlength="25" placeholder="请输入菜单样式" autocomplete="off" class="layui-input">';
			html+='</div>';
			html+='</div>';	
			
			html+='</div>';	
			
			html+='<div class="layui-form-item">';
			html+='<div class="layui-inline">';
			html+='<label class="layui-form-label">菜单URL</label>';
			html+='<div class="layui-input-inline input-inline-width">';	
			html+='<input type="text" name="menuUrl" placeholder="请输入菜单URL" maxlength="25"  autocomplete="off" class="layui-input">';
			html+='</div>';
			html+='</div>';
			
			html+='</div>';
			
			html+='<div class="layui-form-item layui-form-text">';	
			html+='<label name="description" class="layui-form-label">备注</label>';
			html+='<div class="layui-input-block">';						
			html+='<textarea name="remark" class="layui-textarea" placeholder=""></textarea>';		
			html+='</div>';	
			html+='</div>';		
			html+='</form>';
			html+='</div>';
			return html;
		}
		
		// 
		layui.use('form', function () {
			var form = layui.form;
			// 菜单级别			
			form.on('radio(menuLevel)', function (data) {
				initOneMenuSelectHtml(data.value);
				if(data.value==2){					
					selectOneMenuSelectList();	
				}
		    }); 
		})
		
		// 查询二级菜单
		function initOneMenuSelectHtml(val){
			var html = "";
			if(val==2){
				html+='<label class="layui-form-label zdy-required">一级菜单</label>';
				html+='<div class="layui-input-inline input-inline-width">';
				html+='<select class="one-menu-select" name="parentId" lay-verify="required" lay-search="">';
				
				html+='</select>';
				html+='</div>';
			}else if(val==1){
				html+='<label class="layui-form-label zdy-required">菜单样式</label>';
				html+='<div class="layui-input-inline input-inline-width">';
				html+='<input type="tel" name="menuStyle" lay-verify="required" maxlength="25" placeholder="请输入菜单样式" autocomplete="off" class="layui-input">';
				html+='</div>';	
			}	
			$(".one-menu-select-container").empty().append(html);
		}
		
		// 获得一级菜单
		function selectOneMenuSelectList(){
			$.ajax({
				url: '/sysMenu/selectValidOneMenuList',  		// 请求的url地址	
				dataType: 'json', 					// 返回格式为json	
				data: {},
				type: 'post', 						// 请求方式		
				async: false,	
				success: function (res) {
					var html = "";
					html+='<option value="">请选择一级菜单</option>';
					if (res.code == 200) {	
						if(res.dataObject.length>0){
							$.each(res.dataObject,function(i,item){
								html+='<option value="'+item.id+'">'+item.menuName+'</option>';
							})
						}
					} else {
						layer.msg(res.msg);
					}	
					$(".one-menu-select-container .one-menu-select").empty().append(html);
					layui.form.render(); 	
				},
				error: function () {

				}
			});
		}
		
		// 树节点
		var ztree_nodes;
			
		// 环境 ztree	
		var ztree_setting = {
		 /* check: {
		    enable: true
		  },	*/
		  data: {
		    simpleData: {
		      enable: true
		    }
		  },
		  callback:{
		      beforeClick:checkedZtree
		  }
		};	
		
		// 
		function checkedZtree(treeId, treeNode, clickFlag) {
			// 获取父级name					
			$(".node_name_list").empty().append("<a style='font-size: 15px;'>"+getCommonZtreeFilePath(treeNode)+"</a>");
			layui.table.reload('layerTable',{url:table_url,page:{curr:1},where:{id:treeNode.id}});	
		}
		
		// 查询菜单列表
		function selectZtreeList(){
			var zNodesHtml = [];
			var ztreeUrl = '/sysMenu/selectZTreeList';
			$.ajax({					
		        type: 'post',						
		        url: ztreeUrl,			
		      	data:{},														
		        dataType: 'json',	
		        success: function(data) {						
		    		if(data.code==200){										
		    			// zNodesHtml.push({ id:'-1', pId:'-1', name:'全部权限',open:false,typeCode:1});		
		    			if(data.dataObject.length>0){
			        		$.each(data.dataObject,function(i,item){	
			        			if(i==0){		
			        				zNodesHtml.push({ id:item.id, pId:item.pId, name:item.name,open:true,checked:item.checked});	
			        			}else {	
			        				zNodesHtml.push({ id:item.id, pId:item.pId, name:item.name,open:item.open,checked:item.checked});	
								}		
			        		})
		    			}				
		    			ztree_nodes = zNodesHtml;					
		    			$.fn.zTree.init($("#permissionZtree"), ztree_setting, ztree_nodes);
		    			$('.node_name:eq(0)').trigger('click');
		    		}				
			    },							
			    error: function(data){					
			    	zNodesHtml.push({ id:'-1', pId:'-1', name:'系统繁忙',open:false});	
			    	$.fn.zTree.init($("#permissionZtree"), ztree_setting, ztree_nodes);
			    }	
		    });			
		}
	</script>
</body>
</html>